// 给页面动态添加标签和数据

// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ];

// 遍历这个数组
let as = '';
apiTypeData.forEach(function(v){
    // 这里的v代表数组中的每个对象
    let name = v.name;
    let keyWord = v.keyword;
    let isNew = v.isnew;
    
    // 利用模板字符串拼接
    as += `<a href="#" keyword="${keyWord}" class="${ isNew ? 'blod' : '' }" >${name}</a>`;
}) ;
let APTNav = document.querySelector('.APT-nav');
APTNav.innerHTML = as;

// 通过事件委派机制添加事件
// 给父元素添加点击事件，在点击时通过事件对象，获取事件源
APTNav.addEventListener('click',function(e){
    // 这里的e是事件对象，里面有很多属性和参数，其中target属性值，就代表当时点击的是哪个对象；
    // e.target就是点击的事件源
    let a = e.target;
    // 然后判断，如果这个事件源是我们想要添加的事件的目标对象，那么就执行处理函数
     // a.tagName系统拿到的是大写，如果要和标签判断，需要转化为小写
    if (a.tagName.toLowerCase() === 'a') {
        let title = document.querySelector('.search .title');
        let input = document.querySelector('.search input');
        // 将点击的的a标签的内容，放进title里面；
        title.textContent = a.textContent;
        // 将点击的a标签对应的keyword值，放进输入框的placeholer内容
        // 由于a标签的keyword属性是自定义的，因此需要通过方法拿到；
        input.placeholder = a.getAttribute('keyword');
    }
})


let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
]

// 定义一个空串接收拼接的标签
let lis = '';

// 遍历数组
listDataArr.forEach(function(v){
    lis += `
        <li>
            <span class="msg ${v.isSpecial ? 'on' : ''}" >企业专用</span>
            <a href="./APIDetail.html"><img src="./images/${v.img}" alt=""></a>
            <h4>${v.name}</h4>
            <span class="tips ${v.isSpecial ? 'red' : ''}">${v.price}</span>
            <a class="apply">申请数据</a>
        </li>  
    `
});
let ul = document.querySelector('.main');
ul.innerHTML = lis;


// 给ul li里面的a标签添加点击事件
ul.addEventListener('click',function(e){
    console.log(222);
    // 判断点击的是否是a标签
    if (e.target.className === 'apply'){
        document.querySelector('.motai').style.display = 'block';
    };
});

// 给模态框添加点击事件
document.querySelector('.motai').addEventListener('click',function(e){
    // 判断是否点击的是登录框的区域
    // if (e.target.tagName.toLowerCase() === 'form'){
    //     登录框阻止事件冒泡
    //     // return; 
    //     e.target.stopProgation();
    // }else{
    //     document.querySelector('.motai').style.display = 'none'  
    // };

    if (e.target.className === 'motai') {
        document.querySelector('.motai').style.display = 'none'  
    }
});


// 登录效果

// 获取两个按钮
let titles = document.querySelectorAll('.motai .title a');
let divs = document.querySelectorAll('.motai div');
console.log(divs);
// 添加鼠标点击事件
titles.forEach(function(v,i){

    v.addEventListener('click',function(){
        titles.forEach(function(v2,i2){
            v2.classList.remove('on');
            divs[i2].classList.remove('on')
        })
        this.classList.add('on');
        divs[i].classList.add('on');
    })
})

// 分页符效果
let pageAs = document.querySelectorAll('.pages .number');
pageAs.forEach(function(v){
    v.addEventListener('mouseover',function(){
        pageAs.forEach(function(v2){
            v2.classList.remove('on');
        })
        this.classList.add('on');
    });
});

